<template>
<div class="backlog">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>待办事项</el-breadcrumb-item>
    </el-breadcrumb>
  <div class="backlog_search">
    <ul>
      <li><span>订单编号</span>
        <el-input v-model="order_code" placeholder="请输入订单编号"></el-input>
      </li>
      <li><span>外贸合同号</span>
        <el-input v-model="ftc_code" placeholder="请输入外贸合同号"></el-input>
      </li>
      <li><span>买家名称</span>
        <el-input v-model="buyer_name" placeholder="请输入买家名称"></el-input>
      </li>
      <!-- <li><span>当前处理人</span>
        <el-input v-model="form_inst_name" placeholder="请输入处理人"></el-input>
      </li>
      <li><span>订单流程</span>
        <el-select v-model="flow_id" placeholder="请选择" clearable>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </li> -->
      <!-- <li class="blockli"><span>到达时间</span>
        <div class="block">
            <el-date-picker
            v-model="arrival_time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
            </el-date-picker>
        </div>
      </li> -->
    </ul>
    <el-button type="primary" @click="query">查询</el-button>
  </div>
  <div class="backlog-table">
    <el-table :data="tableData" style="width: 100%" border stripe v-loading="loading">
      <el-table-column prop="order_code" label="订单编号" class-name="order_number" min-width="180px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="getList(scope.$index, scope.row)">{{scope.row.order_code}}</el-button>
          </template>
      </el-table-column>
      <el-table-column prop="ftc_code" label="外贸合同号" min-width="300px">
      </el-table-column>
      <el-table-column prop="buyer_name" label="买家名称" min-width="300px">
      </el-table-column>
      <el-table-column prop="arrival_time" label="到达时间" min-width="180px">
          <template slot-scope="scope">
                {{_getTime(scope.row.arrival_time)}}
          </template>
      </el-table-column>
      <el-table-column prop="flow_name" label="订单流程" min-width="200px">
      </el-table-column>
      <el-table-column prop="create_user_name" label="流程发起人" min-width="180px">
      </el-table-column>
    </el-table>
  </div>
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="tablePage.currPage"
      :page-sizes="[20, 30, 50, 100]"
      :page-size="tablePage.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tablePage.totalSize">
    </el-pagination>
  </div>
</div>
</template>

<script>

  import {getTable, getFrom} from '@/server/backlog/index.js'
  import {getStore} from '@/assets/js/common'

  export default {
    data() {
      return {
        isC: '',//登录名
        order_code: '',//订单编号
        ftc_code: '',//外贸合同号
        buyer_name: '',//审批人登录名
        flow_id: '',//订单流程
        // userId: '',//用户ID
        arrival_time: '',//时间
        form_inst_name: '',//当前处理人
        _order_code: '',//订单编号
        _ftc_code: '',//外贸合同号
        _buyer_name: '',//审批人登录名
        _flow_id: '',//订单流程
        _arrival_time: '',//时间
        _form_inst_name: '',//当前处理人
        authority: false,//当前是填报人还是审批人
        loading: false,//加载中
        currPage: 1,//默认当前页数
        pageSize: 30,//默认当前页大小
        totalSize: 0,//总数据条数
        options: [{//选择框选项
            value: '1',
            label: '1业务提单'
          }, {
            value: '2',
            label: '2买家付定金给tcf'
          }, {
            value: '3',
            label: '3tcf付定金给工厂'
          }, {
            value: '4',
            label: '4tcf付尾款到工厂'
          }, {
            value: '5',
            label: '5-8单证流程'
          }, {
            value: '6',
            label: '9买家付尾款给tcf'
          }],
        tableData: [],//表格数据
        tablePage: {
          currPage: 1,
          pageSize: 30,
          totalSize: 0
        }
      }
    },
    mounted() {

      let userMsgObj = JSON.parse(getStore('userMsg'));
      this.isC = userMsgObj.userName;
      // this.userId = userMsgObj.id;
      //默认触发查询事件
      this.query();

    },
    methods: {
      //   点击查询事件
      query(){
        this.currPage = 1;
        this.pageSize = 30;
        this._order_code = this.order_code;
        this._ftc_code = this.ftc_code;
        this._buyer_name = this.buyer_name;
        this._form_inst_name = this.form_inst_name;
        this._flow_id = this.flow_id;

        let obj = {
          orderCode: this.order_code,
          ftcCode: this.ftc_code,
          buyerName: this.buyer_name,
          formInstName: this.form_inst_name,
          flowId: this.flow_id,
          // userId: this.userId,
          currPage: 0,
          pageSize: this.pageSize
          // lt_arrival_time: (this.arrival_time===null) || isNaN(Date.parse(this.arrival_time[0])) ? '' : Date.parse(this.arrival_time[0]),
          // gt_arrival_time: (this.arrival_time===null) || isNaN(Date.parse(this.arrival_time[1])) ? '' : Date.parse(this.arrival_time[1])
        }
        this.ajaxTable(obj);
      },
      ajaxTable(obj) {
        this.loading = true;
        getTable(obj).then((res)=>{
            try {
                if (res.code === 1) {
                    this.tableData = res.data.datas;
                    this.tablePage.totalSize = res.data.totalSize;
                    this.tablePage.currPage = res.data.currPage + 1;
                    this.tablePage.pageSize = res.data.pageSize;
                } else {
                    this.$message.error('查询失败，请检查网路后重试');
                }
            } catch (e) {
                this.$message.error('查询失败，请检查网路后重试');
            }
            this.loading = false;
        })
      },
      // 点击弹出当前表单
      getList(index, row) {
        // window.location.href = "#/initiatingprocess/" + (!row.flow_path ? '' : row.flow_path) + "?dTab=1&formInstId=" + row.id + "&formServiceName=" + row.form_service_name + "&currNodeId=" + (!row.curr_node_id ? '' : row.curr_node_id) + "&flowId=" + row.flow_id + "&itemStatus=1" + "&isCreater="+ (row.create_user_name != this.isC ? 0 : 1);
        this.$router.push({path: '/initiatingprocess' + (!row.flow_path ? '' : '/' + row.flow_path), query: {dTab: 1, formInstId: row.id, formServiceName: row.form_service_name, currNodeId: (!row.curr_node_id ? '' : row.curr_node_id), flowId: row.flow_id, itemStatus: 1, isCreater: (row.create_user_name != this.isC ? 0 : 1)}});
      },
      // 分页每页多少条
      handleSizeChange(val) {
        this.currPage = 1;
        this.pageSize = val;
        let obj = {
            orderCode: this._order_code,
            ftcCode: this._ftc_code,
            buyerName: this._buyer_name,
            formInstName: this._form_inst_name,
            flowId: this._flow_id,
            // userId: this.userId,
            currPage: 0,
            pageSize: this.pageSize
            // lt_arrival_time: (this.arrival_time===null) || isNaN(Date.parse(this.arrival_time[0])) ? '' : Date.parse(this.arrival_time[0]),
            // gt_arrival_time: (this.arrival_time===null) || isNaN(Date.parse(this.arrival_time[1])) ? '' : Date.parse(this.arrival_time[1])
        }
        this.ajaxTable(obj)
      },
      // 分页当前页
      handleCurrentChange(val) {
        this.currPage = val;
        let obj = {
            orderCode: this._order_code,
            ftcCode: this._ftc_code,
            buyerName: this._buyer_name,
            formInstName: this._form_inst_name,
            flowId: this._flow_id,
            // userId: this.userId,
            currPage: val - 1,
            pageSize: this.pageSize
            // lt_arrival_time: (this.arrival_time===null) || isNaN(Date.parse(this.arrival_time[0])) ? '' : Date.parse(this.arrival_time[0]),
            // gt_arrival_time: (this.arrival_time===null) || isNaN(Date.parse(this.arrival_time[1])) ? '' : Date.parse(this.arrival_time[1])
        }
        this.ajaxTable(obj)
      },
      // 将时间戳转化为时间字符串
      _getTime(x){
        if(x === null || x === undefined || x === ''){
            return '-'
        }
        let time = new Date(x);
        return time.getFullYear() + '/' + (time.getMonth() + 1) + '/' + time.getDate();
      },
    }
  }

</script>

<style scoped lang="sass">

@import "../../assets/css/common.sass"

.backlog
  width: 100%
  padding: 20px
  box-sizing: border-box
  .backlog_search
    width: 100%
    border: 1px solid #ebebeb
    border-radius: 4px
    padding: 20px
    padding-bottom: 10px
    box-sizing: border-box
    &::after
      @include  clear
    ul
      width: 90%
      float: left
      &:after
        @include clear
      li
        width: 33%
        float: left
        padding-right: 10px
        box-sizing: border-box
        margin-bottom: 10px
        span
          font-size: 14px
          display: inline-block
          width: 80px
        .el-input, .el-select,
          width: 65%
      .blockli
        width: 100%
        .block
          width: 54.5%
          display: inline-block
          div
            width: 100%
    .el-button
      width: 10%
      height: 40px
.el-select-dropdown__item
  padding: 0 20px !important
.backlog-table
  width: 100%
  padding: 20px
  box-sizing: border-box
  border: 1px solid #ebebeb
  border-radius: 4px
  margin-top: 20px
.order_number
  color: #409EFF
.block
  width: 100%
  margin-top: 20px
  margin-bottom: 20px
  text-align: center
</style>
